<template>
	<view class="content">										
		<view class="d-kuan-juzhong d-beijing-hui3">
			<!--头部-->
			<view class="d-kuan pc-dingbu">
				<DToubu ref="dToubu" ></DToubu>
			</view>

			<!--头部-->
			<!--下面内容-->
			<view class="d-kuan d-buhuanhang">
				<!--左边导航-->
				<view class="d-daohang d-you-10" id="zuo-daohang" :style="{height: leftNavHeight}">
					<view class="d-daohang-5">
						<Ddaohang></Ddaohang>
					</view>

					<!-- 左边一级导航 -->
					<!--view class="d-daohang-zuo">
    				  <view 
    				    v-for="(dao,index) in daohang" 
    				    :key="index" 
    				    class="d-yiji"
    				    :class="{'active': activeIndex === index}"
    				    @click="yiji(index)"
    				  >
    				    {{ dao.name }}
    				  </view>
    				</view-->
    				<!-- 右边二级导航 -->
    				<!--view class="d-daohang-you" v-if="daohang.length > 0 && activeIndex >= 1">
    				  <view 
    				    v-for="(er,index) in erjidata" 
    				    :key="index" 
    				    class="d-erji"
						:class="{'active': erjiindex === index}"
    				    @click="erji(index)"
    				  >
    				    {{ er.name }}
    				  </view>
    				</view-->

				</view>
				<!--左边导航-->
				<!--右边内容-->
				<view class="d-kuan" style="margin-left: 520rpx">
					<uv-tabs :list="list" @click="woke_click"  lineColor="#16afa8"></uv-tabs>
					<uv-row customStyle="margin-bottom: 10px" :gutter="10">
						<uv-col span="8">
							<uv-row v-if="zhanshi_id == 1" customStyle="margin-top: 10px;flex-wrap: wrap" :gutter="20" wrap>
								<uv-col span="6"  >

									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20" @click="zhishi(1)">
										<!--图片-->
										<view class="d-zuo d-tu-kuan-110 d-piaofu-0">
											<view class="d-piaofu-1">免费</view>
											<uv-image src="/static/img/001.jpeg" width="190rpx" height="240rpx" radius="10"></uv-image>
										</view>
										<view class="d-kuan d-neikuang-10">
											<view class="d-chaochu-1 d-jiacu">万维钢·AI前沿</view>
											<view class="d-chaochu-2 d-ziti-14 d-wenzi-yanse-hui">
												为你揭开实现目标、事业有成和生活美满的秘密
											</view>
											<view class="d-chaochu-2 d-ziti-12 d-wenzi-yanse-hui d-shangxia-5">
												<uv-icon name="arrow-right" color="#a7a7a7" labelColor="#a7a7a7" size="12" label="科学"></uv-icon>
											</view>
										    <view class="d-buhuanhang">
												<view class="d-baifen-50">
													<view class="d-zuo  d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														共200讲
													</view>
												</view>
												<view class="d-baifen-50">
													<view class="d-you d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														已有200加入学习
													</view>
    	                                        </view>
											</view>

										</view>
									</view>
								</uv-col>
								<uv-col span="6" >
									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20">
										第er个
									</view>

								</uv-col>

								<uv-col span="6" >
									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20">
										第3个
									</view>

								</uv-col>
								<uv-col span="6" >
									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20">
										第4个
									</view>

								</uv-col>


							</uv-row>
							<uv-row v-if="zhanshi_id == 2" customStyle="margin-top: 10px;flex-wrap: wrap" :gutter="20" wrap>
								<uv-col span="6"  >

									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20" @click="zhishi(1)">
										<!--图片-->
										<view class="d-zuo d-tu-kuan-110 d-piaofu-0">
											<view class="d-piaofu-1">免费</view>
											<uv-image src="/static/img/001.jpeg" width="190rpx" height="240rpx" radius="10"></uv-image>
										</view>
										<view class="d-kuan d-neikuang-10">
											<view class="d-chaochu-1 d-jiacu">万维钢·AI前沿</view>
											<view class="d-chaochu-2 d-ziti-14 d-wenzi-yanse-hui">
												为你揭开实现目标、事业有成和生活美满的秘密
											</view>
											<view class="d-chaochu-2 d-ziti-12 d-wenzi-yanse-hui d-shangxia-5">
												<uv-icon name="arrow-right" color="#a7a7a7" labelColor="#a7a7a7" size="12" label="科学"></uv-icon>
											</view>
										    <view class="d-buhuanhang">
												<view class="d-baifen-50">
													<view class="d-zuo  d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														共200讲
													</view>
												</view>
												<view class="d-baifen-50">
													<view class="d-you d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														已有200加入学习
													</view>
    	                                        </view>
											</view>

										</view>
									</view>
								</uv-col>


							</uv-row>
							<view v-if="zhanshi_id ==3" class="d-kuan">
								<uv-row  customStyle="margin-top: 10px;flex-wrap: wrap" :gutter="20" wrap>
		                            <uv-col span="12"  >
										<view class="beijing-3 d-kuan d-buhuanhang d-xia-20 d-piaofu-0">
										<!--图片-->
										<view class="d-zuo d-tu-kuan-210 d-piaofu-0">
											<view class="d-piaofu-1">免费</view>
											<uv-image src="/static/img/001.jpeg" width="300rpx" height="420rpx" radius="10"></uv-image>
										</view>
										<view class="d-kuan d-neikuang-10">
												<uv-form labelPosition="left" :model="kecheng" ref="form">
													<uv-form-item label="标题" prop="kecheng.biaoti" borderBottom>
														<uv-input v-model="kecheng.biaoti" border="none">
														</uv-input>
													</uv-form-item>
													<uv-form-item label="简介" prop="kecheng.jianjie" borderBottom>
														<uv-input v-model="kecheng.jianjie" border="none">
														</uv-input>
													</uv-form-item>
													<uv-form-item label="模式" prop="kecheng.moshi" borderBottom>
														<uv-radio-group v-model="radiovalue">
															<uv-radio 
																:customStyle="{margin: '8px'}" 
																v-for="(item, index) in radiolist" 
																:key="index" 
																:label="item.name" 
																:name="item.name">
															</uv-radio>
														</uv-radio-group>



													</uv-form-item>
													<uv-form-item label="价格" prop="kecheng.jiage" borderBottom>
														<uv-input v-model="kecheng.jiage" border="none">
														</uv-input>
													</uv-form-item>
													<uv-form-item label="分类" prop="kecheng.fenlei" borderBottom>
														<uv-input v-model="kecheng.fenlei" border="none">
														</uv-input>
													</uv-form-item>


												</uv-form>
											</view>
										</view>


									</uv-col>
								</uv-row>
								<view class="d-kuan">    
    	                    	    <uv-button @click="tijiao" type="warning" custom-style="borderRadius: 40rpx" size="normal" > 提 交 </uv-button>
    	                    	</view>


							

							</view>


							<!--内容-->
							<!--内容-->
						</uv-col>
						<uv-col span="4">

						</uv-col>
					</uv-row>

				</view>
				<!--右边内容-->

			</view>
			<!--下面内容-->
			<uv-popup ref="popup" mode="center" @change="change" :custom-style="{position: 'fixed'}">
				<view style="width: 800rpx;height: 800rpx;">
					<view class="d-neikuang-10">
					<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
					不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
					转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
					但愿人长久，千里共婵娟。</text>
				</view>
				</view>
			</uv-popup>





		</view>
	</view>
</template>

<script>
//引入组件 d-toubu
    import DToubu from '@/components/d-toubu/d-toubu.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				leftNavHeight: '500rpx', // 默认高度
				daohang: [
					{
						id:'1',
						name: '首页', 
						icon: 'home',

					},
					{
						id:'2',
						name: '心理学', 
						icon: 'home',
						erji: [	
							{id: '2-1', name: '情绪管理'},
					    	{id: '2-2', name: '心理疗愈'},
					    	{id: '2-3', name: '行为心理学'}
						]
					},
					
				],
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引
				list: [
					{
						id:1,
					    name: '我的课程',
						badge: {
							value: 5,
						}
					},
					{
						id:2,
					    name: '购买课程',
						badge: {
							value: 5,
						}
					},
					{
						id:3,
						name: '创建课程',
					}],
					zhanshi_id:1,
					kecheng: {
						biaoti: '',
						jiage:'',
						jianjie: '',
						moshi: '',
						neirong: '',
						
					},
					radiovalue: '免费', // 默认选中的值，应该与某个
					radiolist: [
						{
							name: '免费',
							disabled: false
						}, {
							name: '付费',
							disabled: false
						}

					],

			}
		},
		components: {
  		  DToubu
  		},
		mounted() {
			if (!this.denglu_jiance()) return;
    	    this.setLeftNavHeight();
    	    // 添加窗口大小变化监听
    	    window.addEventListener('resize', this.setLeftNavHeight);
    	},
    	beforeDestroy() {
    	    // 移除监听
    	    window.removeEventListener('resize', this.setLeftNavHeight);
    	},
		onLoad() {
			
		},
		methods: {
			//首页
			shouye(){
				uni.navigateTo({
					url: '/pages/index/index',
					fail: (err) => {
						console.error('跳转失败:', err)
					}
				})
			},
			// ...其他方法保持不变...
			yiji(index) {
    		  // 切换激活的一级菜单
    		  this.activeIndex = index;
    		  // 根据激活的一级菜单显示对应的二级菜单
    		  this.erjidata = this.daohang[index].erji;
			  console.log(this.erjidata);
    		},
			erji(index) {
    		  // 切换激活的二级菜单
    		  this.erjiindex = index;
    		},
			toggleErji(index) {
    		  if (this.activeIndex === index) {
    		    // 点击已激活的菜单，收起二级菜单
    		    this.activeIndex = -1;
    		    this.currentErji = [];
    		  } else {
    		    // 点击新的菜单，显示对应的二级菜单
    		    this.activeIndex = index;
    		    this.currentErji = this.daohang[index].erji;
    		  }
    		},
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
        	    const headerHeight = 70; // 头部高度估计值
        	    const calculatedHeight = windowHeight - headerHeight;
				
        	    // 设置左边导航高度
        	    this.leftNavHeight = `${calculatedHeight}px`;
        	},
			zhishi(id){
				console.log(id);
				try {
  				  uni.navigateTo({
  				    url: '/pages/zhishi/index?id='+id,
  				    fail: (err) => {
  				      console.error('跳转失败:', err)
  				    }
  				  })
  				} catch (e) {
  				  console.error('跳转异常:', e)
  				}
			},
			woke_click(e){
				console.log(e);	
				this.zhanshi_id = e.id;
			},
			change(e) {
				console.log(e);
			},
			tijiao(){
				
				uni.showToast({
					title: '提交成功',
					icon: 'success',
					duration: 2000,
					success: () => {
						setTimeout(() => {
							this.zhanshi_id = 1;
							uni.navigateBack({
								delta: 1
							})
						}, 300)
					}
				})
			},
			denglu_jiance(){
				// 检查是否登录（通过Vuex状态判断）
				if (!this.$store.state.memberuid || !this.$store.state.keycode) {
    			  // 未登录，通过ref调用子组件的登录弹窗方法
    			  this.$refs.dToubu.dengluzhi();
    			  uni.showToast({
    			    title: '请先登录',
    			    icon: 'none'
    			  });
    			  return;
    			}

			},
			// 关闭播放音频
			clearAllAudio() {
    		  if(this.$refs.audioPlayer) {
    		    const audioCtx = this.$refs.audioPlayer.getAudioContext();
    		    audioCtx.stop();
    		    audioCtx.destroy();
    		  }
    		},



		}
	}
</script>

<style>

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/*justify-content: center;*/
		background-color: #f3f3f3;
		padding-top: 70px;
		height: calc(100vh - 0px); /* 添加全屏 */
		width: 100vw; /* 添加全屏*/

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/*.d-daohang{
		display: flex;
		width: 600rpx;
	}*/
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }

	
</style>
